// 便捷服务-商户列表-师傅列表
<template>
	<uni-nav-bar left-icon="left" :title="supplier.supplierName" :shadow="true" :statusBar="true" backgroundColor="#e68a4b" @clickLeft="back">
	</uni-nav-bar>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll-Y">
			<uni-list :border="false">
				<uni-list-item
					thumbSize="lg"
					:clickable="true">
					<template v-slot:header>
						<view>
							<image class="list-item-thumb" :src="supplier?.supplierPic"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="body-content">
							<view class="topView list-item-text-title">
								<text>{{ supplier?.supplierName }}</text>
							</view>
							<view style="display: flex;margin-top: 5rpx;">
								<text class="list-item-text-desc">星级：</text>
								<uni-rate allow-half :readonly="true" size="16" :value="supplier.score" />
							</view>
							<view style="margin-top: 5rpx;" class="list-item-text-desc">{{ supplier.workTimeDesc }}</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-card :is-shadow="false" is-full >
				<uni-forms ref="form" :modelValue="formData" label-position="left">
					<uni-forms-item required name="phoneno" label="手机">
						<uni-easyinput type="number" v-model="formData.phoneno" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item name="remark" label="备注" >
						<uni-easyinput v-model="formData.remark" placeholder="备注信息" />
					</uni-forms-item>
				</uni-forms>
				<uni-table border stripe emptyText="暂无更多数据" >
					<!-- 表头行 -->
					<uni-tr>
						<uni-th width="40" align="center"></uni-th>
						<uni-th width="80" align="center" v-for="(item,index) in staffAllWorkList">
							<view>{{item.day.slice(0,2)}}</view>
							<view style="white-space: nowrap; overflow: visible;">{{item.day.slice(3,item.day.length)}}</view>
						</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr>
						<uni-td align="center">上午</uni-td>
						<uni-td align="center" v-for="(item,index) in staffAllWorkList">
							<view
								:class="item.amHasStock > 0 ? 'date-td-view' : 'date-td-view-dis'" 
								@click="choseDate(item, 'am')">{{item.amHasStock > 0 ? '可预约' : '已约满'}}
							</view>
						</uni-td>
					</uni-tr>
					<uni-tr>
						<uni-td align="center">下午</uni-td>
						<uni-td align="center" v-for="(item,index) in staffAllWorkList">
							<view
								:class="item.pmHasStock > 0 ? 'date-td-view' : 'date-td-view-dis'"
								@click="choseDate(item, 'pm')">{{item.pmHasStock > 0 ? '可预约' : '已约满'}}
							</view>
						</uni-td>
					</uni-tr>
				
				</uni-table>
			</uni-card>
			
			<uni-card :is-shadow="false" is-full spacing="0" padding="0">
				<view class="detailTip">{{ supplier.supplierServiceDetailText }}</view>
				<image class="detailImg" mode="widthFix" :src="supplier.supplierServiceDetailIcon"></image>
			</uni-card>
		
		</scroll-view>
		
		<!-- <uni-popup ref="popup" type="bottom" :animation="false" :maskClick="true" @change="change"> -->
		<uni-popup ref="popup" :animation="true" type="bottom">
				<view class="choose-time">
					<view class="popTitle">{{selTimeDesc}}</view>
					<view class="popContent">{{supplier?.supplierName}}</view>
					<scroll-view :scroll-y="true" class="scrollview">
						<uni-grid class="grid-container" :column="8" :highlight="false" :square="false" :showBorder="false">
							<uni-grid-item class="grid-item" v-for="(item,index) in timeList" :key="index">
								<view class="grid-item-padding">
									<view
										class="grid-view"
										:class="{'grid-view-active': selTimeIndex === index, 'grid-view-disabled': item.stock <= 0}"
										:disabled="item.stock <= 0"
										@click="chooseTime(item, index)"
									>
										<view class="grid-view-text">{{item.workTime}}</view>
										<view class="grid-view-text">剩余:{{item.stock}}</view>
									</view>
								</view>
							</uni-grid-item>
						</uni-grid>
					</scroll-view>
					<button class="sureBtn" :loading="sureBtnLoading" @click="sureClick">确 认</button>
				</view>
		</uni-popup>
	</view>
</template>

<script>
	import { orderSubscribe, getStaffWorkList } from "@/API/home.js"
		
	export default {
		data() {
			return {
				rules: {
					phoneno: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码',
						}]
					}
				},
				formData: {
					phoneno: "",
					remark: ""
				},
				selDay: '',
				selTimeDesc: '',
				list: [],
				timeList: [],
				selTimeIndex: -1, // 预约时间段的下标
				selTimeObj: null,
				sureBtnLoading: false,
				searchVlalue: '',
				supplier: {},
				staffAllWorkList: [],
				userId: ''
			}
		},
		onLoad(options) {
			this.formData.phoneno = getApp().globalData.phoneno || ''
			this.supplier = JSON.parse(options.supplier)
			this.getWorkList()
			uni.setNavigationBarTitle({
				title: this.supplier.supplierName
			})
			const self =  this
			uni.getStorage({
			    key: 'user_login_key',
			    success: (res) => {
			        self.userId = res.data.userId
			    }
			})
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 搜索
			search(content) {
				this.searchVlalue = content.value
			},
			// 取消搜索
			searchCancel() { 
				this.searchVlalue = ''
			},
			// 点击日期选择
			choseDate(value, amOrPm) {
				this.selDay = value.dayForSort
				if (amOrPm === 'am') {
					if (value.amHasStock <= 0) return
					this.timeList = value.amWorkClassList
					this.selTimeDesc = `${value.dayForSort} ${value.week} 上午`
					this.open()
				} else if (amOrPm === 'pm') {
					if (value.pmHasStock <= 0) return
					this.timeList = value.pmWorkClassList
					this.selTimeDesc = `${value.dayForSort} ${value.week} 下午`
					this.open()
				}
				
			},
			// 获取排班计划
			getWorkList() {
				getStaffWorkList({
					supplierId: this.supplier.id,
					buildingId: this.supplier.buildingId
				}).then(res => {
					this.staffAllWorkList = res.data
				})
			},
			
			// 选择预约的时间段
			chooseTime(dateObj, index) {
				if (dateObj.stock === 0) return
				this.selTimeIndex = index
				this.selTimeObj = dateObj
			},
			// 打开时间段选择框
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			// 关闭时间段选择框
			closePopView() {
				this.$refs.popup.close()
			},
			// 确认预约
			sureClick() {
				this.$refs.form.validate().then(res=>{
					this.subRquest()
				}).catch(err =>{
					console.log('表单错误信息：', err);
					uni.showModal({
						confirmColor:'#f00',
						title:'提示',
						content:'请填写预约人的手机号码。您也可在“个人中心”-“修改资料”中添加手机号码。',
						showCancel: false,
						success(res) {
						}
					});
					// uni.showToast({
					// 	title: '请填写预约手机号码',
					// 	icon: 'none'
					// })
				})
			},
			// 预约请求
			subRquest() {
				if (this.selTimeIndex === -1) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					})
					return
				}
				this.sureBtnLoading = true
				orderSubscribe({
					userId: this.userId,
					guestName: getApp().globalData.nickName,
					guestPhone: this.formData.phoneno,
					guestRemark: this.formData.remark,
				    supplierId: this.supplier.id,
				    workClassId: this.selTimeObj.id
				}).then(res => {
					this.sureBtnLoading = false
					this.selTimeIndex = -1
					this.closePopView()
					this.loadSucView(res.data)
				}).catch(error => {
					this.sureBtnLoading = false
				})
			},
			loadSucView(data) {
				const sucTip = {
					day: this.selDay,
					time: this.selTimeObj.workTime,
					buildingName: this.supplier.buildingName,
					addr: this.supplier.buildingDetailAddress,
					serviceName: this.supplier.serviceName
				}
				uni.navigateTo({
					url: '/pages/home/merchantDetail/appointSuc?sucTip='+JSON.stringify(sucTip)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height:100%
	}
	.container {
		width: 100%;
		height: 100%;
		background-color: white;
		
		.detailTip {
			font-size: $uni-font-size-base;
			padding: 0 20rpx;
		}	
		
		.detailImg {
			width: 100%;
		}
		
		.date-td-view {
			color: black;
		}
		
		.date-td-view-dis {
			color: $life-color-dark;
		}
		
		::v-deep .uni-table-tr:first-child {
			background-color: $life-color-blue-dark;
		}
		
		::v-deep .uni-table-tr:nth-child(2) {
			background-color: $life-color-blue-light;
		}
		
		::v-deep .uni-table-tr:nth-child(3) {
			background-color: $life-color-dark-light;
		}

		::v-deep .uni-table-tr:first-child {
			background-color: $life-color-blue-dark;
		}		
		::v-deep .uni-table-th {
			color: white;
		}
		
		.choose-time {
			padding: 10rpx;
			bottom: 0;
			background-color: #fbfbfb;
			width: 100vw;
			height: 45vh;
			
			.scrollview {
				height: calc(100% - 250rpx);
			}
			
			.popTitle {
				font-weight: bold;
				font-size: $uni-font-size-lg;
				color: #c55a11;
				text-align: center;
			}
			
			.popContent {
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				font-size: $uni-font-size-base;
				text-align: center;
			}
			
			.sureBtn {
				width: 60%;
				font-size: $uni-font-size-lg;
				background-color: $life-color-blue-btn;
				position: absolute;
				bottom: 25rpx;
				left: 20%;
				color: white;
			}
		}
		.grid-container {
			padding-left: 20rpx;
			padding-right: 20rpx;
			.grid-item {
				width: 240rpx;
				height: 100rpx;
				.grid-item-padding {
					min-width: 220rpx;
					padding: 10rpx;
				}
				.grid-view {
					background-color: $life-color-blue;
					border-radius: 10rpx;
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					color: white;
					text-align: center;
					padding: 10rpx;
					.grid-view-text{
						font-size: $uni-font-size-sm;
						margin-top: 5rpx;
						height: 30rpx;
						line-height: 30rpx;
					}
				}
				.grid-view-active {
					background-color: $life-color-blue-sel;
				}
				.grid-view-disabled {
					background-color: $life-color-dark;
				}
			}
		}
	}
	
	.body-content {
		width: 75%;
		margin-left: 20rpx;
		.topView {
			display: flex;
			.staffStatus {
				font-weight: normal;
				margin-left: 50rpx;
				color: #fff;
				font-size: $uni-font-size-sm;
				border-radius: 10rpx;
				height: 45rpx;
				line-height: 45rpx;
				width: 120rpx;
				text-align: center;
			}
			.staffStatusTrue {
				background-color: $bg-color-orange;
			}
			.staffStatusfalse {
				background-color: $bg-color-light-orange;
			}
		}
	}
	
</style>